<template>
  <view class="game-container">
    <view class="transition-overlay" :class="{ 'active': transitionActive }"></view>

    <view class="game-header new-area-header">
      <text class="header-title">古代遗迹区域</text>
      <view class="resources">
        <view class="resource">
          <image src="https://cdn-icons-png.flaticon.com/512/2123/2123235.png" mode="aspectFit"></image>
          <text>资金: {{ gameState.funds }}</text>
        </view>
        <view class="resource">
          <image src="https://cdn-icons-png.flaticon.com/512/2922/2922506.png" mode="aspectFit"></image>
          <text>粮食: {{ gameState.food }}</text>
        </view>
        <view class="resource">
          <image src="https://cdn-icons-png.flaticon.com/512/628/628669.png" mode="aspectFit"></image>
          <text>文物: {{ gameState.artifact }}</text>
        </view>
      </view>
      <button class="jump-button" @click="backToCapital">返回首都</button>
    </view>

    <view class="building-menu">
      <text class="menu-title">探索选项</text>
      <view class="building-options">
        <view class="building-option" @click="performAction('explore')">
          <image src="https://cdn-icons-png.flaticon.com/512/3917/3917739.png" mode="aspectFit"></image>
          <view class="building-info">
            <text class="info-title">探索遗迹</text>
            <text>消耗粮食，寻找文物</text>
            <text>成本: 100 粮食</text>
          </view>
        </view>
        <view class="building-option" @click="performAction('dig')">
          <image src="https://cdn-icons-png.flaticon.com/512/2777/2777136.png" mode="aspectFit"></image>
          <view class="building-info">
            <text class="info-title">挖掘</text>
            <text>消耗资金，发掘文物</text>
            <text>成本: 200 资金</text>
          </view>
        </view>
      </view>
    </view>

    <view id="game-scene">
      <view class="ruins" @click="repairRuins"></view>
    </view>

    <view class="exploration-log">
      <text class="log-title">探索日志</text>
      <scroll-view scroll-y="true" class="log-content">
        <text v-for="(log, index) in logs" :key="index" class="log-entry">{{ log }}</text>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 游戏状态
const gameState = ref({
  funds: 0,
  food: 0,
  artifact: 0
});

// UI状态
const transitionActive = ref(false);
const logs = ref(['欢迎来到古代遗迹区域！在这里，你可以探索和挖掘文物。']);

// 路由
const route = useRoute();
const router = useRouter();

// 更新UI
function updateUI() {
  // Vue的响应式系统会自动更新UI
}

// 添加日志条目
function addLogEntry(text) {
  logs.value.push(`> ${text}`);
  // 滚动到底部
  setTimeout(() => {
    const scrollView = document.querySelector('.log-content');
    if (scrollView) {
      scrollView.scrollTop = scrollView.scrollHeight;
    }
  }, 100);
}

// 返回首都
function backToCapital() {
  transitionActive.value = true;
  setTimeout(() => {
    router.push({
      path: '/pages/home/home',
      query: {
        funds: gameState.value.funds,
        food: gameState.value.food,
        artifact: gameState.value.artifact
      }
    });
  }, 1000);
}

// 执行行动
function performAction(actionType) {
  if (actionType === 'explore') {
    if (gameState.value.food >= 100) {
      gameState.value.food -= 100;
      const foundArtifact = Math.random() > 0.5 ? 1 : 0;
      if (foundArtifact) {
        gameState.value.artifact += 1;
        addLogEntry('探索成功！你发现了一个文物！');
      } else {
        addLogEntry('探索结束，没有发现文物。');
      }
      updateUI();
    } else {
      addLogEntry('粮食不足，无法探索！');
    }
  } else if (actionType === 'dig') {
    if (gameState.value.funds >= 200) {
      gameState.value.funds -= 200;
      const foundArtifact = Math.random() > 0.3 ? 1 : 0;
      if (foundArtifact) {
        gameState.value.artifact += 1;
        addLogEntry('挖掘成功！你获得了一个文物！');
      } else {
        addLogEntry('挖掘结束，没有发现文物。');
      }
      updateUI();
    } else {
      addLogEntry('资金不足，无法挖掘！');
    }
  }
}

// 修复遗迹
function repairRuins() {
  if (gameState.value.artifact >= 5) {
    addLogEntry('你使用了5个文物修复了遗迹，获得了古代知识！');
    gameState.value.artifact -= 5;
    addLogEntry('资金增加了500！');
    gameState.value.funds += 500;
    updateUI();
  } else {
    addLogEntry('需要5个文物才能修复遗迹。');
  }
}

// 初始化
function init() {
  // 从路由参数获取游戏状态
  gameState.value.funds = parseInt(route.query.funds) || 0;
  gameState.value.food = parseInt(route.query.food) || 0;
  gameState.value.artifact = parseInt(route.query.artifact) || 0;

  updateUI();

  // 显示进入动画
  setTimeout(() => {
    transitionActive.value = true;
    setTimeout(() => {
      transitionActive.value = false;
    }, 1000);
  }, 100);
}

// 组件挂载时初始化
onMounted(() => {
  init();
});
</script>

<style scoped>
/* 新区域特定样式 */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.game-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f0e6;
}

.game-header {
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.new-area-header {
  background-color: #2a52be;
  color: #f5f0e6;
}

.header-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  display: block;
}

.resources {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.resource {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px 15px;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.resource:hover {
  transform: scale(1.05);
}

.resource image {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.jump-button {
  background-color: #d4af37;
  color: #1a1a1a;
  border: 2px solid #8b4513;
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.jump-button:hover {
  background-color: #ffd700;
  transform: scale(1.05);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}

.building-menu {
  padding: 20px;
  background-color: #e8d8c3;
  border-bottom: 2px solid #8b4513;
}

.menu-title {
  color: #8b4513;
  margin-bottom: 15px;
  text-align: center;
  font-size: 22px;
  display: block;
  font-weight: bold;
}

.building-options {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.building-option {
  background-color: #f5f0e6;
  border: 2px solid #8b4513;
  border-radius: 8px;
  padding: 15px;
  width: 220px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 3px 3px 0 rgba(139, 69, 19, 0.3);
}

.building-option:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 0 rgba(139, 69, 19, 0.5);
}

.building-option image {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.building-info .info-title {
  color: #8b4513;
  margin-bottom: 5px;
  display: block;
  font-weight: bold;
}

.building-info text {
  font-size: 14px;
  margin-bottom: 3px;
  display: block;
}

#game-scene {
  height: 400px;
  background-color: #d2b48c;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #8b4513;
}

.ruins {
  position: absolute;
  width: 120px;
  height: 120px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/4350/4350445.png');
  background-size: contain;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.ruins:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.exploration-log {
  margin: 20px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.log-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.log-content {
  flex: 1;
  max-height: 200px;
}

.log-entry {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}
</style>